import React, { useEffect, useState } from 'react'
import { Modal, message } from 'antd';
import { Button, Space, Table, Tag, Form, Input } from 'antd';
import {  Drawer } from 'antd';
import { ListApi, SearchApi, addApi } from '../../api/user'
import '../../App.css'
function Index() {
  const [list, setList] = useState([])
  const getData = async () => {
    const res = await ListApi()
    console.log(res.rows);
    setList(res.rows)
  }
  useEffect(() => {
    getData()
  }, [])
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      render: text => <a>{text}</a>,
    },
    {
      title: 'title',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: 'content',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: 'createdAt',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>编辑 {record.name}</a>
          <a>删除</a>
        </Space>
      ),
    },
  ];
  // 新增对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const add = () => {
    setIsModalOpen(true)
  }
  // 新增add
  const onFinish = async (values) => {
    console.log('Success:', values);
    const data = {
      title: values.title,//文章标题
      content: values.content,//文章内容
      tagList: ["HTTP"],//标签  array[string]
      categoryList: ["HTTP"],//分类  array[string]
      authorId: 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
    }
    const res = await addApi(data)
    console.log(res);
    setIsModalOpen(false)
    message.success('新增成功')
    getData()
  };
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
  // 搜索
  const { Search } = Input;
  const onSearch = async(value) => {
    const res=await SearchApi(value)
    setList(res.rows)
  }
  const cz=()=>{
    getData()
  }
  const qh=()=>{
    document.body.classList.toggle('dark')
    setOpen(true)
  }
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  return (
    <div>
      <Button onClick={add}>添加消息</Button>
      <Search placeholder="input search text" onSearch={onSearch} enterButton />
      <Button onClick={cz}>重置</Button>
      <Modal
        title="Basic Modal"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="title"
            name="title"
            rules={[{ required: true, message: '请输入文章标题' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="content"
            name="content"
            rules={[{ required: true, message: '请输入文章内容' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Table columns={columns} dataSource={list}  pagination={{
         total:list.length,
         showSizeChanger:true,
         showQuickJumper:true,
         showTotal:total => `Total ${total} items`
      }}/>
      <Button style={{marginLeft:"980px"}} onClick={qh}>主题</Button>
      <Drawer
        title="Basic Drawer"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
      <Button onClick={qh}>切换主题</Button>
        
      </Drawer>
    </div>
  )
}

export default Index
